<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>显示网络场景</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        // Graphics代表点，线和多边形等几何形状，通常存储在的内存中graphics layer
        require([
            // 为了存储图形，您需要创建一个GraphicsLayer并将其添加到地图中
            'esri/Map',
            'esri/views/MapView',
            'esri/layers/GraphicsLayer',
            // 添加草图小部件
            'esri/widgets/Sketch'
        ],function(
            Map,
            MapView,
            GraphicsLayer,
            Sketch
        ) {
            // 为图形创建临时图层
            var graphicsLayer = new GraphicsLayer();

            var map = new Map({
                basemap:"topo-vector",
                layers:[graphicsLayer]
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });

            // 草图小部件
            var sketch = new Sketch({
                view:view,
                layer:graphicsLayer
            });
            view.ui.add(sketch,"top-right");

            // challange

            // 更改符号样式
            //*** Red stroke, 1px wide ***//
            var stroke = {
               color: [255, 0, 0],
               width: 1
            };

            //*** White fill color with 50% transparency ***//
            var fillColor = [255, 255, 255, 0.5];

            //*** Override all of the default symbol colors and sizes ***//
            var pointSymbol = sketch.viewModel.pointSymbol;
            pointSymbol.color = fillColor;
            pointSymbol.outline = stroke;
            pointSymbol.size = 8;

            var polylineSymbol = sketch.viewModel.polylineSymbol;
            polylineSymbol.color = stroke.color;
            polylineSymbol.width = stroke.width;

            var polygonSymbol = sketch.viewModel.polygonSymbol;
            polygonSymbol.color = fillColor;
            polygonSymbol.outline = stroke;

            // 添加属性和弹出窗口(有点问题)

            // create创建图形后，可使用Sketch事件将弹出窗口添加到图形中
            sketch.on("create", function (event) {
                console.log(event.state)
                if (event.state === "complete") {
                    var attributes = {
                        name: "My Graphic",
                        type: event.graphic.geometry.type
                    };
                    event.graphic.attributes = attributes;

                    var popupTemplate = {
                        title: "{name}",
                        content: "I am a {type}."
                    };
                    event.graphic.popupTemplate = popupTemplate;
                }
            });

        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>